<template>
  <div class="page" v-loading="loading">
    <el-form :model="applicationInfo" size="small" label-width="130px">
      <el-form-item label="应用名字">
        <el-input
          class="input1"
          v-model="applicationInfo.name"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="应用描述">
        <el-input
          class="input1"
          v-model="applicationInfo.desc"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="模型描述">
        <el-tag>{{ model_desc }}</el-tag>
        <el-button
          type="primary"
          class="qiehuanmoxing"
          @click="clickQieHuanMoXing"
          >切换模型</el-button
        >
      </el-form-item>
      <el-form-item label="模型id">
        {{ applicationInfo.model }}
      </el-form-item>
      <el-form-item label="模型名字">
        {{ model_name }}
      </el-form-item>
      <el-form-item label="知识库id">
        <el-input class="input1" v-model="zskId" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="知识库id">
        <el-tag>{{ zskName }}</el-tag>
      </el-form-item>
      <el-form-item label="是否开启多轮对话">
        <el-switch
          v-model="applicationInfo.multiple_rounds_dialogue"
          active-color="#13ce66"
          inactive-color="#ff4949"
        >
        </el-switch>
      </el-form-item>

      <el-form-item label="问题变量">
        <el-input
          class="input1"
          v-model="applicationInfo.model_setting.no_references_prompt"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="应用提示词">
        <el-input
          class="input2"
          v-model="applicationInfo.model_setting.prompt"
          type="textarea"
          :autosize="{ minRows: 4, maxRows: 40 }"
          placeholder="请输入内容"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="知识库提示词">
        <el-input
          class="input2"
          v-model="applicationInfo.dataset_setting.no_references_setting.value"
          type="textarea"
          :autosize="{ minRows: 4, maxRows: 40 }"
          placeholder="请输入内容"
          autocomplete="off"
        ></el-input>
      </el-form-item>
    </el-form>

    <el-button class="addmodel" size="small" type="primary" @click="clickSave"
      >保存</el-button
    >
    <!-- 切换模型对话框 -->
    <el-dialog
      title="切换模型"
      :visible.sync="modelDialog"
      width="35%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <el-form :model="modelForm" size="small">
        <el-form-item label="模型描述">
          <el-autocomplete
            v-model="modelForm.name"
            :fetch-suggestions="searchModel"
            clearable
            placeholder="请输入模型描述"
            @select="handleSelect"
          ></el-autocomplete>
        </el-form-item>
        <el-form-item label="模型id">
          {{ modelForm.id }}
        </el-form-item>
        <el-form-item label="模型名字">
          {{ modelForm.model_name }}
        </el-form-item>

        <el-form-item label="模型类型">
          {{ modelForm.model_type }}
        </el-form-item>
        <el-form-item label="模型类型">
          {{ modelForm.provider }}
        </el-form-item>
        <el-form-item label="模型权限">
          {{ modelForm.permission_type }}
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="modelDialog = false">取 消</el-button>
        <el-button type="primary" @click="clickConfirmChangeModel"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { post } from "@/common/request";
import { toast } from "@/common/tools";
import { mapState } from "vuex";
export default {
  data() {
    return {
      // 切换模型对话框是否显示
      modelDialog: false,
      // 模型描述
      model_desc: "",
      // 模型名字
      model_name: "",
      // 应用id
      id: "",
      // 知识库id
      zskId: "",
      // 知识库名字
      zskName: "",
      // 模型对象
      modelForm: {
        // 模型名称
        name: "",
        // 模型类型
        model_type: "LLM",
        // 权限
        permission_type: "PRIVATE",
        // 模型供应商
        provider: "",
        // 自定义模型
        model_name: "bot-",
        credential: {
          // coze账号的id
          user: "2102144826",
          // coze机器人botid
          bot_id: "",
          // api域名
          coze_api_base: "https://api.coze.cn",
          // API Key
          coze_api_key:
            "pat_3e8eBYVT0wHO3H6jyyfiWDso5w9qgnMHSJWylYwPGKZfE4Tni9tdIPnW0mJToHP3",
        },
      },
      loading: false,
      createDialog: false,
      editDialog: false,
      scanDialog: false,
      // 添加模型对话框是否显示
      dialogAddModel: false,
      // 添加模型的表单
      applicationInfo: {
        tts_model_enable: false,
        create_time: "",
        work_flow: {},
        icon: "/ui/favicon.ico",
        multiple_rounds_dialogue: true,
        type: "SIMPLE",
        dataset_id_list: [""],
        model_params_setting: {
          max_tokens: 1024,
          temperature: 0.95,
        },
        tts_type: "BROWSER",
        dialogue_number: 1,
        update_time: "",
        problem_optimization_prompt: null,
        stt_model: null,
        model_setting: {
          no_references_prompt: "{question}",
          prompt: "",
        },
        stt_model_enable: false,
        name: "",
        model: "",
        // 模型描述,来自模型详情
        model_desc: "",
        // 模型名字,来自模型详情
        model_name: "",
        model_id: "",
        tts_model: null,
        id: "",
        problem_optimization: false,
        dataset_setting: {
          search_mode: "embedding",
          top_n: 3,
          similarity: 0.3,
          max_paragraph_char_number: 5000,
          no_references_setting: {
            value: "",
            status: "ai_questioning",
          },
        },
        user: "",
        prologue: "",
        desc: "",
      },
      status: "",
      // 展示的模型列表
      modelList: [],
      // 模型类型
      modelProvider: "model_coze_provider",
      key: "",
      isEmpty: false,
      syncId: "",
      pageNum: 1,
      pageSize: 15,
      total: 0,
      id: "",
    };
  },
  created() {
    this.list = [];
    this.getApplicationInfo();
  },

  watch: {
    loginoutRandom() {
      this.reStart();
    },
  },

  computed: {
    ...mapState({
      userPackageInfo: (state) => state.userPackageInfo,
      loginoutRandom: (state) => state.loginoutRandom,
    }),
  },

  methods: {
    callback() {
      this.reStart();
    },

    reStart() {
      this.getApplicationInfo();
    },

    // 获取应用详情
    getApplicationInfo() {
      this.id = this.$route.query.id;
      this.zskName = this.$route.query.zskName;
      if (this.id) {
        this.$post("/front/dataset/getApplication", {
          id: this.id,
        })
          .then((res) => {
            if (res.data.code === 0) {
              this.applicationInfo = res.data.obj;
              console.log("应用详情", this.applicationInfo);
              this.zskId = this.applicationInfo.dataset_id_list[0];
              if (!this.applicationInfo.model) {
                toast(1, "模型id不存在,获取不到模型信息");
              }
              this.$post("/front/dataset/getModel", {
                id: this.applicationInfo.model,
              })
                .then((res2) => {
                  if (res2.data.code === 0) {
                    this.model_desc = res2.data.obj.name;
                    this.model_name = res2.data.obj.model_name;

                    console.log("应用详情", this.applicationInfo);
                  }
                })
                .catch(() => {
                  console.log("模型详情获取失败");
                });
            }
          })
          .catch(() => {
            console.log("应用详情获取失败");
          });
      } else {
        toast(1, "缺少应用id");
        console.log("应用详情获取失败");
      }
    },

    // 点击确定按钮,点击添加模型对话框的确认按钮
    clickSave() {
      this.loading = true;
      if (!this.applicationInfo.model_id) {
        this.applicationInfo.model_id = this.applicationInfo.model;
      }
      console.log("要更新的应用详情", this.applicationInfo);
      post("/front/dataset/updateApplication", this.applicationInfo)
        .then((res) => {
          this.loading = false;
          if (res.data.code === 0) {
            toast(0, "更新成功");
            this.getApplicationInfo();
          } else {
            toast(1, res.data.msg);
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 点击切换模型
    clickQieHuanMoXing() {
      this.modelDialog = true;
    },
    // 搜索模型
    searchModel(queryString, cb) {
      this.$post("/front/dataset/searchModel", {
        name: queryString,
      }).then((res) => {
        if (res.data.code === 0) {
          if (res.data.obj) {
            const result = [];
            for (let i = 0; i < res.data.obj.length; i++) {
              result.push(res.data.obj[i]);
              result[i].value = res.data.obj[i].name;
            }
            cb(result);
            return;
          }
        }
      });
      cb([]);
    },
    // 选择搜索出来的模型
    handleSelect(item) {
      this.modelForm = item;
    },
    // 点击确定切换模型
    clickConfirmChangeModel() {
      this.modelDialog = false;
      this.applicationInfo.model_id = this.modelForm.id;
      this.clickSave();
    },
  },
};
</script>

<style lang="less" scoped>
:deep(.el-icon-search:before) {
  color: #aaa !important;
}
:deep(.el-icon-circle-close) {
  font-size: 18px !important;
  color: #409eff !important;
}
.page {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  padding: 10px 10px 0;
}
.useridtitle {
  width: 50px;
  line-height: 40px;
  text-align: center;
  font-weight: 600;
}
.userid {
  width: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 13px;
  padding: 0 10px;
}
.wechatid {
  width: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 13px;
  padding: 0 10px;
}
.wechatnametitle {
  width: 180px;
  line-height: 40px;
  text-align: center;
  font-weight: 600;
}
.wechatstatustitle {
  width: 100px;
  line-height: 40px;
  text-align: center;
  font-weight: 600;
}
.wechatname {
  width: 180px;
  line-height: 50px;
  text-align: center;
  font-size: 13px;
  padding: 0 10px;
}
.zhishikid {
  margin: 10px 0;
}
:deep(.el-table) {
  overflow: scroll;
}
.el-table::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}
.caozuo {
  display: flex;
  flex-direction: column;
  justify-content: start;
}
.addmodel {
  position: absolute;
  top: 90px;
  right: 40px;
}
.flex1 {
  display: flex;
  justify-content: space-between;
}
.tabs {
  height: 82vh;
}
.input1 {
  width: 400px;
}
.input2 {
  width: 900px;
}
.qiehuanmoxing {
  margin-left: 20px;
}

:deep(.el-button--primary) {
  span {
    color: #fff !important;
  }
}
</style>
